<!doctype html>
<html>
<head>
    <title>测试ajaxJsonObject</title>
    <meta charset="UTF-8">
    <script>
        window.onload = function () {
            let btn = document.querySelector(".get");
            let show = document.querySelector(".show");
            let xm1 = document.querySelector(".xm1");
            let age1 = document.querySelector(".age1");
            btn.onclick = function () {
                let xm = document.querySelector(".xm").value;
                let pwd = document.querySelector(".pwd").value;
                //通过ajax向服务端请求数据
                //1.实例化一个ajax交流对象
                let xmlHttp = new XMLHttpRequest();
                //2.以Post方式向服务器接口ajaxInfo发出异步请求
                xmlHttp.open("post", '/lodinweb1_0_war_exploded/ajaxjson', true);
                //3.设置响应头
                xmlHttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
                //4.发射
                xmlHttp.send("name=" + xm + "&key=" + pwd);
                //5.判断状态 监听返回的数据 4 200
                xmlHttp.onreadystatechange = function () {
                    //4.响应数据成功
                    if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
                        //5.写入数据
                        //JSON String--JSON object
                        let data = JSON.parse(xmlHttp.responseText);
                        // alert(data[1].name);
                        // alert(data[1].school);
                        xm1.innerHTML=data[1].name;
                        age1.innerHTML=data[1].school;
                        //json字符串转成json对象 JS对象子集
                        // show.innerHTML = data;
                    }
                }
            }
        }
    </script>
</head>
<body>
<div class="show">
    0000
</div>
姓名:
<input type="text" class="xm"><br>
密码:
<input type="text" class="pwd"><br>
<button class="get">获取</button><br>
姓名<div class="xm1">
</div>
年龄<div class="age1">
</div>
</body>
</html>